<script setup>

    //基本数据类型  建议使用 ref
    //对象 建议使用 建议使用 reactive
    import { ref,reactive } from 'vue'

    let count = ref(1);

    let obj = reactive({
        num:1
    })

    //对象操作结构清晰 操作属性  清晰
    let user = reactive({
        name:"zs",
        age:30
    })

    function getData(){
        //ref 包装数据是一个代理数据 需要使用value 或者值
        alert(count.value);
    }

    function changeData(){
        obj.num++;
    }

    function getUser(){
        console.log(user)
    }


</script>

<template>
    <!-- 在差值表达式中 可以直接 count 获取数据  -->
    <button @click="count++"> 点我 {{count}}</button>
    <button @click="getData"> 获取数据 </button>
    <button @click="changeData"> 获取数据reactive: {{obj.num}} </button>
    <button @click="getUser"> 获取数据user: {{user.name}}  {{user.age}} </button>

</template>

<style scoped>

</style>